<template>
 <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules">

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="基地名字">
              <a-input placeholder="请输入基地名字" v-model="model.name"/>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address" label="基地地址">
              <a-input placeholder="请输入基地地址" v-model="model.address"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownedCompany" label="所属公司">
              <a-input placeholder="请输入所属公司" v-model="model.ownedCompany"/>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manager" label="负责人">
              <a-input placeholder="请输入负责人" v-model="model.manager"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone" label="联系手机">
              <a-input placeholder="请输入联系手机" v-model="model.phone"/>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="aera" label="基地面积">
              <a-input-number style='display: inline-block;'  placeholder="请输入基地面积" v-model="model.aera"/>
              <a style='display: inline-block;' >平方米</a>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="基地地块管理" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="flowerPlantingGreenhouse2Table.loading"
            :columns="flowerPlantingGreenhouse2Table.columns"
            :dataSource="flowerPlantingGreenhouse2Table.dataSource"
            :scroll='{ x: true }'
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true">

            <template v-slot:variety="props" style='width: 100%;' >

              <!--
              <a-select  v-model="props.variety"   @change='changes(props)'   placeholder='请选择' style='width: 100%;'>
                <a-select-option v-for='d in sVarietyLists' :key='d.value' :value='d.value'>{{ d.value }}</a-select-option>
              </a-select>
-->
              <a-select  mode="multiple"  style="width: 100%" placeholder="请选择"  @change='handleChange(props)'  :rowEvent="props">
                <a-select-option v-for="i in sVarietyLists" :key="i.value" >
                  {{ i.value}}
                </a-select-option>
              </a-select>


            </template>


          </j-editable-table>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
</template>

<script>

    import { FormTypes } from '@/utils/JEditableTableUtil'
    import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
    import {  getVarietyNameList  } from '../../../api/vegetableAPI'
    export default {
      name: 'FlowerPlantingBase2Form',
      mixins: [JEditableTableModelMixin],
      data() {
        return {
          // 新增时子表默认添加几行空数据
          addDefaultRowNum: 1,
          model: {
          //设置默认值
           },
          validatorRules: {
            name: [{ required: true, message: '请输入基地名字!' }],
            address: [{ required: true, message: '请输入基地地址!' }],
            ownedCompany: [{ required: true, message: '请输入所属公司!' }],
            manager: [{ required: true, message: '请输入负责人!' }],
            phone: [{ required: true, message: '请输入联系手机!' }],
          },
          refKeys: ['flowerPlantingGreenhouse2', ],
          activeKey: 'flowerPlantingGreenhouse2',
          // 基地大棚管理
          flowerPlantingGreenhouse2Table: {
            loading: false,
            dataSource: [],
            columns: [
              {
                title: '大棚名字',
                key: 'name',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
                validateRules: [{ required: true, message: '${title}不能为空' }],
                width: "100px",
              },
              {
                title: '大棚编号',
                key: 'number',
                type: FormTypes.inputNumber,
                defaultValue: '',
                placeholder: '请输入${title}',
                validateRules: [{ required: true, message: '${title}不能为空' }],
                width: "100px",
              },
            /*  {
                title: '种植产品',
                key: 'variety',
                type: FormTypes.slot,
                placeholder: '请输入${title}',
                width: "350px",
                validateRules: [{ required: true, message: '${title}不能为空' }],
                slotName: 'variety',
              },*/
                {
                title: '种植产品',
                key: 'variety',
                type: FormTypes.select,
                options: [],
                defaultValue: '',
                props: { 'mode': 'multiple' }, // 支持多选
                placeholder: '请输入${title}',
                width: "400px",
                validateRules: [{ required: true, message: '${title}不能为空' }],

              },
              {
                title: '负责人',
                key: 'manager',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
                validateRules: [{ required: true, message: '${title}不能为空' }],
                width: "100px",
              },
              {
                title: '联系手机',
                key: 'phone',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
                width: "100px",
              },
           /*   {
                title: '大棚面积',
                key: 'aera',
                type: FormTypes.inputNumber,
                defaultValue: '',
                placeholder: '请输入${title}',
                width: "100px",
              },
              {
                title: '纬度',
                key: 'lat',
                type: FormTypes.inputNumber,
                defaultValue: '',
                placeholder: '请输入${title}',
                width: "100px",
              },
              {
                title: '经度',
                key: 'lng',
                type: FormTypes.inputNumber,
                defaultValue: '',
                placeholder: '请输入${title}',
                width: "100px",
              },
              {
                title: '海拔',
                key: 'altitude',
                type: FormTypes.inputNumber,
                defaultValue: '',
                placeholder: '请输入${title}',
                width: "100px",
              },*/

            ]
          },
          url: {
            add: "/flower/flowerPlantingBase2/add",
            edit: "/flower/flowerPlantingBase2/edit",
            flowerPlantingGreenhouse2: {
              list: '/flower/flowerPlantingBase2/queryFlowerPlantingGreenhouse2ByMainId'
            },
          },
          sVarietyLists:[]
        }
      },
      created() {
        this.getVarietyLists()
      },
      methods: {
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
          // 加载子表数据
          if (this.model.id) {
            let params = { id: this.model.id }
            this.requestSubTableData(this.url.flowerPlantingGreenhouse2.list, params, this.flowerPlantingGreenhouse2Table)
          }
        },

        /** 整理成formData */
        classifyIntoFormData(allValues) {
          for (let j  = 0; j < allValues.tablesValue[0].values.length; j++) {
            allValues.tablesValue[0].values[j].variety=  allValues.tablesValue[0].values[j].variety.toString()
          }
          let main = Object.assign(this.model, allValues.formValue)
          return {
            ...main, // 展开
            flowerPlantingGreenhouse2List: allValues.tablesValue[0].values,
          }
        },
        getVarietyLists() {
          this.sVarietyLists=[]
          getVarietyNameList().then(res =>{
            if (res.success) {
              res.result.forEach( rows=>{
                let row = {}
                row.title = rows.name
                row.text = rows.name
                row.value = rows.name
                this.sVarietyLists.push(row)
              })
              this.flowerPlantingGreenhouse2Table.columns[2].options=this.sVarietyLists
            } else {
              this.$message.error(res.message)
            }
          })
        },
        handleChange(props){
          debugger
          props.variety="sssss"
        },
      }
    }
</script>

<style scoped>
</style>